<template>
  <div class="comment">

    <div class="commentPortrait">
      <img v-lazy='headUrlImg || headDefaultImg' alt="" @click="gotoUser">&nbsp;&nbsp;
      <div @click="gotoUser">
        <span class="commentUsername">{{commentUsername}}</span><br>
        <Rater v-model="dataRate" :margin="1" disabled :font-size="16" active-color="#FFA004"></Rater>
        <span class="commentScore">{{dataRate}}分</span>
      </div>
    </div>

    <div class="commentCon" v-if="this.splitMatchImgUrlItem">
      <p class="commentConent" @click="commentAll">{{commentConent}}</p>
      <div class="commentImg">
        <grid class="commentImgItem" :cols="3" :show-lr-borders="false" :show-vertical-dividers="false">
          <grid-item v-for="(item, index) in splitMatchImgUrlItem" :key="index" v-if="item !== ''">
            <img class="previewer-demo-img" v-lazy="item.src" width="90" @click="show(index, item.src)">
          </grid-item>
        </grid>
      </div>
    </div>

    <div class="reply" @click="commentAll">
      <p class="replyContentMore">共{{replyCounte}}条回复  ></p>
    </div>

    <div v-transfer-dom>
      <previewer :list="splitMatchImgUrlItem" :options="options" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import { Rater, Grid, GridItem, TransferDom } from 'vux'
import Previewer from '@/components/previewer/previewer'
import headDefaultImg from '@/assets/img/default_avatar.png'

export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      splitMatchImgUrlItem: [],
      options: {
        loop: false
      },
      headDefaultImg
    }
  },
  props: {
    commentUsername: {
      type: String,
      default: ''
    },
    dataRate: {
      type: Number,
      default: 0
    },
    commentConent: {
      type: String,
      default: ''
    },
    headUrlImg: {
      type: String,
      default: ''
    },
    dateTime: {
      type: String,
      default: ''
    },
    matchImgUrl: {
      type: String,
      default: ''
    },
    replyCounte: {
      type: Number,
      default: 0
    }
  },
  components: {
    Rater,
    Grid,
    GridItem,
    Previewer
  },
  mounted() {
    this.splitMatchImgUrl()
  },
  methods: {
    commentAll () {
      this.$emit('commentAll')
    },
    commentAllInfo () {
      this.$emit('commentAllInfo')
    },
    splitMatchImgUrl () {
      const tmp = []
      this.matchImgUrl.split(';').forEach(item => {
        tmp.push({
          src: item
        })
      })
      this.splitMatchImgUrlItem = tmp.slice(0, -1)
    },
    show (index, src) {
      // 预览图片
      if (src === null || src === '') {
        this.$vux.toast.text('图片被猪拱了~', 'middle')
        return
      }
      this.$vux.loading.show({
        text: '加载中...',
        position: 'absolute'
      })
      this.$refs.previewer.show(index)
    },
    preImgLoaded () {
      this.$vux.loading.hide()
    },
    gotoUser () {
      this.$emit('gotoUser')
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
@import '~@/assets/css/variable.styl'

  .comment{
    background #fff
    padding 0 10px
    p:nth-child(1){
      font-size $font-size-medium-x
    }
    .commentPortrait{
      display flex
      align-items center
      // margin-bottom 16px
      img:nth-child(1){
        width 50px
        height 50px
        border-radius 50px
      }
      .commentUsername{
        font-size $font-size-title

      }
      .commentScore{
        color $color-text-2
        font-size $font-size-desc
      }
    }
    .commentConent{
      margin 0px 0 10px 60px
      font-size $font-size-desc
      color $color-text-2
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-line-clamp 5
      -webkit-box-orient vertical
    }
    .commentImg{
      .commentImgItem{
        padding-left 60px
      }
      img{
        height 86px
        width 86px
      }
    }
    .commentFooter{
      margin 10px 0 10px 60px
      display flex
      justify-content space-between
      .dateTime{
        font-size $font-size-small
        color $color-text-2
      }
      img{
        width 15px
        height 15px
        margin-right 30px
      }
    }
    .moreFooter{
      width 100%
      height 20px
      line-height 20px
      text-align center
      font-size $font-size-medium-x
      color $color-text-dark
      border-top 1px solid lightgrey
      padding 10px 0 0 0
    }
    .reply{
      margin-left 60px
      padding 10px 10px
      margin-bottom 10px
      background rgba(0, 0, 0, 0.05)
      word-wrap break-word
      word-break normal
      .replyContent{
        width 100%
        font-size $font-size-small
        color $color-text-2
        .replyContentTit {
          font-size $font-size-desc
          color $color-theme
        }
      }
      .replyContentMore {
        font-size $font-size-desc
        color $color-theme
      }
    }
  }
</style>
